<template>
  <el-dialog title="查看" width="80%" :close-on-click-modal="false" :destroy-on-close="true" v-if="visible"
    :visible.sync="visible">
    <el-button style="position: absolute;top:10px;left:100px;font-size: 20px;color:#00A0E9" type="text"
      @click="init(lId,1)">刷新</el-button>

    <span slot="footer" class="dialog-footer">
      <div style="position: relative; width: 100%;height: 700px;">

        <div
          style="position: absolute;top:0;left:0;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 8px 0 6px rgba(0, 0, 0, .04);background: #fff;z-index: 100000;padding:0 30px 0 10px;height: 100%;box-sizing: border-box;">

          <el-form :disabled="true" :model="dataForm" :rules="dataRule" ref="dataForm"
            @keyup.enter.native="dataFormSubmit()" label-width="80px">
            <el-form-item label="设备编号" prop="equNumber">
              <el-input v-model="dataForm.equNumber" placeholder="设备编号"></el-input>
            </el-form-item>
            <!-- <el-form-item label="设备名" prop="equName">
              <el-input v-model="dataForm.equName" placeholder="设备名"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="设备运行时间戳" prop="runTime">
        <el-input v-model="dataForm.runTime" placeholder="设备运行时间戳"></el-input>
      </el-form-item> -->
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="dataForm.longitude" placeholder="经度"></el-input>
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="dataForm.latitude" placeholder="纬度"></el-input>
            </el-form-item>
            <el-form-item label="设备状态" prop="equStatus">
              <el-input v-model="dataForm.equStatus" placeholder="设备状态"></el-input>
            </el-form-item>
            <el-form-item label="设备步数" prop="equSteps">
              <el-input v-model="dataForm.equSteps" placeholder="设备步数"></el-input>
            </el-form-item>
            <el-form-item label="设备电量" prop="equElectric">
              <el-input v-model="dataForm.equElectric" placeholder="设备电量"></el-input>
            </el-form-item>
            <el-form-item label="设备温度" prop="equTemperature">
              <el-input v-model="dataForm.equTemperature" placeholder="设备温度"></el-input>
            </el-form-item>
            <el-form-item label="电池容量" prop="equTemperature">
              <el-input v-model="dataForm.mah" placeholder="电池容量"></el-input>
            </el-form-item>
            <!-- <el-form-item label="设备电压" prop="equVoltage">
              <el-input v-model="dataForm.equVoltage" placeholder="设备电压"></el-input>
            </el-form-item>
            <el-form-item label="电流" prop="equCurrent">
              <el-input v-model="dataForm.equCurrent" placeholder="电流"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="不定长数据" prop="variableLength">
          <el-input v-model="dataForm.variableLength" placeholder="不定长数据"></el-input>
        </el-form-item> -->
            <el-form-item label="设备最后在线时间" prop="updateTime">
              <el-input v-model="dataForm.updateTime" placeholder="设备最后在线时间"></el-input>
            </el-form-item>
            <el-form-item label="最后连接ip" prop="ip">
              <el-input v-model="dataForm.ip" placeholder="最后连接ip"></el-input>
            </el-form-item>
            <!-- <el-form-item label="所有报文信息" prop="allMessage">
          <el-input v-model="dataForm.allMessage" placeholder="所有报文信息"></el-input>
        </el-form-item> -->
            <!-- <el-form-item label="表名" prop="tableName">
        <el-input v-model="dataForm.tableName" placeholder="表名"></el-input>
      </el-form-item> -->
          </el-form>
        </div>
        <div id="container" ref="container" style="width: 100%;height: 700px;">

        </div>
      </div>
      <el-button type="primary" style="margin-top: 20px;" @click="gb()">关闭</el-button>
    </span>

  </el-dialog>
</template>


<script>
  export default {
    props: ['lookid'],
    data() {
      return {
        mapAge: 1,
        lId: null,
        latitude: '', //纬度
        longitude: '',
        visible: true,
        num: 0,
        dataForm: {
          id: 0,
          equNumber: '',
          equName: '',
          runTime: '',
          longitude: '',
          latitude: '',
          equStatus: '',
          equSteps: '',
          equElectric: '',
          equTemperature: '',
          equVoltage: '',
          equCurrent: '',
          variableLength: '',
          createTime: '',
          allMessage: '',
          tableName: ''
        },
        dataRule: {
          equId: [{
            required: true,
            message: '设备唯一ID不能为空',
            trigger: 'blur'
          }],
          runTime: [{
            required: true,
            message: '设备运行时间戳不能为空',
            trigger: 'blur'
          }],
          longitude: [{
            required: true,
            message: '经度不能为空',
            trigger: 'blur'
          }],
          latitude: [{
            required: true,
            message: '纬度不能为空',
            trigger: 'blur'
          }],
          equStatus: [{
            required: true,
            message: '设备状态不能为空',
            trigger: 'blur'
          }],
          equSteps: [{
            required: true,
            message: '设备步数不能为空',
            trigger: 'blur'
          }],
          equElectric: [{
            required: true,
            message: '设备电量不能为空',
            trigger: 'blur'
          }],
          equTemperature: [{
            required: true,
            message: '设备温度不能为空',
            trigger: 'blur'
          }],
          equVoltage: [{
            required: true,
            message: '设备电压不能为空',
            trigger: 'blur'
          }],
          equCurrent: [{
            required: true,
            message: '电流不能为空',
            trigger: 'blur'
          }],
          variableLength: [{
            required: true,
            message: '不定长数据不能为空',
            trigger: 'blur'
          }],
          createTime: [{
            required: true,
            message: '创建时间不能为空',
            trigger: 'blur'
          }],
          allMessage: [{
            required: true,
            message: '所有报文信息不能为空',
            trigger: 'blur'
          }],
          tableName: [{
            required: true,
            message: '表名不能为空',
            trigger: 'blur'
          }]
        },
        markerLayer:null,
        center:null,
        map:null,

      }
    },
    created() {
        setInterval(()=>{
          this.init(this.lId,1)
        },30000)
    },

    mounted() {

    },
    methods: {
      gb() {
        console.log(this.visible)
        this.visible = false
        console.log(this.visible)
      },
      initMap() {
        // console.log(this.mapAge,this.latitude, this.longitude)
        this.center = new TMap.LatLng(this.latitude, this.longitude)
        if (this.mapAge == 1) {

          console.log(this.latitude, this.longitude)
          this.map = new TMap.Map(document.getElementById('container'), {
            center: this.center, //设置地图中心点坐标
            zoom:14,

          });
          // this.map.on('center_changed', () => {
          // 				markerGeo.position = this.map.getCenter();
          // 				markerLayer.updateGeometries([markerGeo]);
          // 			});
          //创建并初始化MultiMarker
          this.markerLayer = new TMap.MultiMarker({
            map: this.map, //指定地图容器
            //样式定义
            //点标记数据数组
            geometries: [{
              "id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
              "styleId": 'marker', //指定样式id
              "position": this.center, //点标记坐标位置
              "properties": { //自定义属性
                "title": "marker1"
              }
            }]
          });
        }

        console.log(this.markerLayer,'dadas')
        this.map.setCenter(this.center)
        this.markerLayer.updateGeometries([{
          "styleId": "marker",
          "id": "1",
          "position": this.center,
        }])



      },

      init(id, x) {
        console.log('随机数=',new Date().getTime())
        // var time=new Date().getTime()
        if (x == 1) {
          this.dataForm = {}
          this.mapAge += 1

        }
        this.lId = id
        this.visible = true
        this.$http({
          url: this.$http.adornUrl(`/equ/manage/info/${id}?time=${new Date().getTime()}`),
          method: 'get',

        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data)
            this.dataForm = data.dyEqu
            this.longitude = this.dataForm.longitude
            this.latitude = this.dataForm.latitude

            console.log('num=', this.num)
            // if(this.num==0){
            this.initMap()
            //    this.num++
            // }

            // if (this.dataForm.equStatus == 1) {
            //   this.dataForm.equStatus = "异常"
            // }
            // if (this.dataForm.equStatus == 0) {
            //   this.dataForm.equStatus = "正常"
            // }
          }
        })

      },

      // 表单提交

    }
  }
</script>
<style>
  .el-dialog__body {
    padding-bottom: 0px !important;
  }
</style>
